<template>
  <div class="searchindex">
    <van-tabs class="nav" v-model="active" sticky offset-top="0.5rem">
      <van-tab title="综合"> 综合 </van-tab>
      <van-tab title="单曲">
        <h5 class="listtitle">单曲</h5>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          v-show="list"
        >
          <van-cell
            v-for="item in list"
            :key="item.id"
            @click="play(item.id, item)"
          >
            <div class="songDetail">
              <div style="width: 80%; float: left">
                <h1
                  style="
                    color: #216093;
                    font-size: 0.3rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ item.name }}
                </h1>
                <h1
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    item.artists.map((item1) => item1.name).join("，") +
                    " - " +
                    item.album.name
                  }}
                </h1>
                <h1
                  style="
                    color: grey;
                    width: 80%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  v-if="item.alias.length > 0"
                >
                  {{ item.alias[0] }}
                </h1>
              </div>
              <van-icon
                v-show="item.mvid"
                style="float: right; margin-top: 0.3rem"
                name="video"
              />
            </div> </van-cell
        ></van-list>
      </van-tab>
      <van-tab title="歌单">歌单</van-tab>
      <van-tab title="视频">视频</van-tab>
      <van-tab title="歌手">歌手</van-tab>
      <van-tab title="播单">播单</van-tab>
      <van-tab title="歌词">歌词</van-tab>
      <van-tab title="专辑">专辑</van-tab>
      <van-tab title="声音">声音</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { searchByKeyApi } from "../../../api/search";
import { mapActions } from "vuex";

export default {
  name: "index",
  data() {
    return {
      active: 1,
      page: 1,
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {},
  methods: {
    ...mapActions({
      setSongid: "songID/setAsyncid",
    }),
    play(id, item) {
      console.log(item);
      this.setSongid(id);
    },
    async onLoad() {
      const value = this.$route.query.keywords;
      const params = {
        keywords: value,
        limit: 20,
        offset: (this.page - 1) * 20 + 1,
      };
      const result = await searchByKeyApi(params);
      // 加载状态结束
      let songInfo = result.data.result.songs;
      this.loading = false;
      this.list = [...this.list, ...songInfo];

      // 数据全部加载完成
      if (songInfo.length < 20) {
        this.finished = true;
      } else {
        this.page++;
      }
    },
  },
};
</script>

<style scoped>
.listtitle {
  font-size: 0.25rem;
}
</style>
